<!DOCTYPE html>
<html class="f1" lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <link href="./css/demo1.css" rel="stylesheet">
    <link href="https://at.alicdn.com/t/c/font_4624650_5g2npkwdtv.css" rel="stylesheet">

</head>
<body>
<div id="particles-js"></div>
<button class="iconfont icon-pifu" id="fn" onclick="fn()"></button>
<div id="root">
    <div class="mainImg"></div>

    <div class="main" id="mainLogin">
        <h1>用 户 登 录</h1>
        <div class="top">
            <label>
                账&emsp;户：<input class="getText" placeholder="请输入手机号或账户" type="text">
            </label>
            <label>
                密&emsp;码：<input class="getText" placeholder="请输入密码" type="password">
            </label>
            <div class="content">
                <label class="mainAlert">
                    <input name="" type="checkbox">自动登录
                    <span class="alert">警告：为了您的安全请不要在网吧等公共场所使用!</span>
                </label>
                <span class="get_acc">没有账户去注册？</span>
            </div>
            <button class="loginBtn" id="login">登录</button>
        </div>
    </div>

    <!--注册-->
    <div class="main" id="mainGet_acc">
        <h1>用 户 注 册</h1>
        <div class="top">
            <label>
                邮&emsp;箱：<input class="getText" placeholder="请输入可用邮箱" type="text">
            </label>
            <label>
                账&emsp;户：<input class="getText" placeholder="请输入手机号或账户" type="text">
            </label>
            <label>
                密&emsp;码：<input class="getText" placeholder="请输入密码" type="password">
            </label>
            <div class="content">
                <label class="mainAlert">
                    <input name="" type="checkbox">同意<a href="">《协议》</a>
                </label>
                <span class="get_acc">已经有账户了去登录！</span>
            </div>
            <button class="loginBtn" id="sign">注册</button>
        </div>
    </div>


</div>

<script>
    let html = document.querySelector('html')
    let AlertDis = document.querySelector(".mainAlert")
    let alertP = document.querySelector('.alert')
    let get_acc = document.getElementsByClassName("get_acc")
    let mainGet_acc = document.getElementById("mainGet_acc") // 注册
    let mainLogin = document.getElementById("mainLogin") // 登录
    let fBoll = true
    let mainGet_boll = false
    get_acc = Array.from(get_acc)

    function fn() {
        if (!fBoll)
            html.className = "f1"
        else
            html.className = "f2"
        fBoll = !fBoll
    }

    // 切换到注册
    get_acc.forEach((ele) => {
        ele.onclick = () => {
            mainGet_boll = !mainGet_boll
            if (mainGet_boll) {
                mainLogin.style.display = 'none'
                mainGet_acc.style.display = 'block'
            } else {
                mainLogin.style.display = 'block'
                mainGet_acc.style.display = 'none'
            }
        }
    })


    AlertDis.onmouseover = () => {
        alertP.style.display = 'block'
    }
    AlertDis.onmouseout = () => {
        alertP.style.display = 'none'
    }


</script>
<script src="./JS/particles.js"></script>
<script src="./JS/app.js"></script>
</body>
</html>